<template>
	<view class="content">
		<Loading :show="companyLoading"></Loading>
		
		
		<view v-show="!companyLoading">
		<view class="index-top">
			<u-swiper :list="company.many_image" height="350" mode="dot" :dotBottom="35" :dotColor="'#0069da'" @click="swiperIndex"></u-swiper>
			<!-- <view class="index-top-bottom"> -->
			<navigator class="serach-dh" url="../buildings/index">
				<u-icon :label="'搜索大厦名称或地点'" labelSize="27rpx" labelColor="#a4a7a8" size="40" name="search" color="#989da3"></u-icon>
				<!-- <view> <u-icon size="30" name="search" color="#989da3"></u-icon> </view> -->
			</navigator>
			<!-- </view> -->
		</view>
		<view class="index-center">
			<view class="center">
				<view class="center-content">
					<navigator class="center-part" url="../buildings/index">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/property_insuarance.png`)" width="100rpx" height="100rpx"></u-image>
						<text class="center-part-title">写字楼</text>
					</navigator>
					<navigator class="center-part" url="../store/index">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/house_garden.png`)" width="100rpx" height="100rpx">

						</u-image>
						<text class="center-part-title">商铺</text>

					</navigator>
					<!-- <view class="center-part">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/property_inspection.png`)" width="70px" height="70px"
						></u-image>
						<text class="center-part-title">VR房源</text>
		
					</view> -->

					<navigator class="center-part" url="../estate/EstateExperts">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/realtor.png`)" width="100rpx" height="100rpx">

						</u-image>
						<text class="center-part-title">房产专家</text>
					</navigator>
					<view class="center-part">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/marketing.png`)" width="100rpx" height="100rpx" @click="click"></u-image>
						<text class="center-part-title">帮我找房</text>
					</view>
				</view>

				<!-- <view class="center-content" style="margin-top: 40rpx;">
					<view class="center-part">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/marketing.png`)" width="70px" height="70px" @click="click"></u-image>
						<text class="center-part-title">兼职</text>
					</view>
					<view class="center-part">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/rental_contract.png`)" width="70px" height="70px"
						 @click="click"></u-image>
						<text class="center-part-title">注册公司</text>
					</view>
					<view class="center-part">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/house_construction.png`)" width="70px" height="70px"
						 @click="click"></u-image>
						<text class="center-part-title">装修设计</text>
					</view>
					<view class="center-part">
						<u-image :showLoading="true" :src="imgUrl(`/images/jump/residence.png`)" width="70px" height="70px" @click="click"></u-image>
						<text class="center-part-title">推荐好礼</text>
		
					</view>
				</view> -->
			</view>
		</view>

		<view class="company-introduce">
			<view class="company-introduce-part">
				<u-image :border-radius="100" :showLoading="true" :src="imgUrl(company.cover_image)" radius="100%" width="85rpx" mode="widthFix"
				 style="margin-left: 30rpx;"></u-image>

				<view class="company-introduce-title">
					<text class="company-introduce-title-text">{{company.company_name}}</text>
					<view class="company-introduce-location" @click="go()">
						<u-icon name="map-fill" color="#1d7fff" size="35" class="op"></u-icon><text>{{company.address}}</text>
					</view>
				</view>

				<u-image :showLoading="true" :src="imgUrl(`/images/company/send.png`)" radius="100%" width="70rpx" height="70rpx"
				 class="op right-png" @click="go()"></u-image>
				<view class="contact">
					<u-image :showLoading="true" :src="imgUrl(`/images/company/wechat-fill.png`)" radius="100%" width="70rpx" height="70rpx"
					 class="op right-png"></u-image>
					<button class="button" open-type="contact"></button>
				</view>

				<u-image @click="callup()" :showLoading="true" :src="imgUrl(`/images/company/phone.png`)" radius="100%" width="70rpx"
				 height="70rpx" class="op right-png"></u-image>

			</view>
			<view class=" company-introduce-part-font">
				<view class="content">
				
					<xzj-readMore hideLineNum="2" showHeight="100">
						{{company.company_describe}}
					</xzj-readMore>
				</view>

			</view>
		</view>

		<!-- <view class="information">
			<span class="information-title">房产资讯</span>
			
			<u-notice-bar :color="'black'" :bg-color="'white'" mode="vertical" type="info" :list="newsList" style="flex:1;margin-left: 20rpx;"
			 :volume-icon="false"></u-notice-bar>
		</view> -->

		<view class="recommended">
			<view class="recommended-title">写字楼推荐</view>
			<view class="recommended-content">

				<navigator v-for="(item,index) in housing.data" :key="index" :url="`../buildings/BuildingsContent?id=${item.id}`">

					<ListPart class="recommended-part" :sourceDataProp="listPart(item)"></ListPart>

					<view v-show="index+1 != housing.data.length">
						<u-line></u-line>
					</view>

				</navigator>
			</view>
			<u-loading :show="housing.loading" color="#2979ff" size="35"></u-loading>

			<view class="recommended-bottom" >
				<view class="recommended-bottom-button"  >
					  <u-button type="primary" :loading="housing.loading"  :custom-style="{background:'#ecf5ff !important',color:'#2979ff !important' }" style="width: 100%;" @click="housingAdd">查看更多</u-button>
				</view>
			</view>


		</view>

		<view class="recommended" style="margin-bottom: 25rpx;">
			<view class="recommended-title">商铺推荐</view>
			<u-loading :show="storeLoading" color="#2979ff" size="35"></u-loading>
			<view class="recommended-content">

				<navigator v-for="(item,index) in store.data" :key="index" :url="`../store/StoreContent?id=${item.id}`">
					<ListPart class="recommended-part" :sourceDataProp="storePart(item)"></ListPart>

				<view v-show="index+1 != store.data.length">
					<u-line></u-line>
				</view>

				</navigator>
			</view>


			<view class="recommended-bottom" >
				<view class="recommended-bottom-button"  >
				<u-button type="primary" :loading="store.loading"  :custom-style="{background:'#ecf5ff !important',color:'#2979ff !important' }" style="width: 100%;" @click="storeAdd">查看更多</u-button>
			    </view>
			</view>


		</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import ListPart from "@/components/list/ListPart.vue"
	import xzjReadMore from "@/components/xzj-readMore/xzj-readMore"
	import  {settingSelOne}     from "@/services/setting"
	import Loading from "@/components/loading/loading.vue"
	import {
		housingList
	} from "@/services/housing.js"
	import { storeList } from "@/services/store.js"
	export default {
		components: {
			ListPart: ListPart,
			xzjReadMore: xzjReadMore,
			Loading:Loading
		},
		data() {
			return {
				// imagesList: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				// ],

				housing: {
					loading: false,
					data: [],
					config: {
						pageSize: 3,
						page: 1,
						keyWord: {

						},
					}
				},
				store: {
					loading: false,
					data: [],
					config: {
						pageSize: 3,
						page: 1,
						keyWord: {
				
						},
					}
				},
				// housingLoading:false,


				sourceData: [],
				sourceDataStore: [],

				newsList: [
					'寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
					'平明送客楚山孤平明送客楚山孤平明送客楚山孤平明送客楚山孤平明送客楚山孤平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				companyLoading:true,
				company: {
					// latitude: 22.504753, //经度
					// longitude: 113.378334, //纬度
					// title: '格子空间', //
					// address: '博爱三路36号之一5层',
					// phone: '18664470888',
					// image: '/images/company/company.jpg',
					// describe: `山不在高，有仙则名。水不在深，有龙则灵。山不在高，有仙则名。水不在深，有龙则灵。山不在高，有仙则名。水不在深，有龙则灵。山不在高，有仙则名。水不在深，有龙则灵。山不在高，有仙则名。水不在深，有龙则灵。山不在高，有仙则名。水不在深，有龙则灵。`
				},
			}
		},


		onLoad() {
			// console.log(uni.$u.config.v);
			// console.log(this.$store)
			// uni.showShareMenu()

		},
		created() {
			this.housingListLoad()  //房源
			this.storeListLoad()    //店铺
			this.settingSelOneLoad() //首页
		},
		computed: {

		},
		methods: {
			housingAdd(){
				this.housing.config.page++
				this.housingListLoad()
			},
			async settingSelOneLoad(){
				this.companyLoading = true
				let res = await settingSelOne()
				if(res.code == 200){
					this.company = res.data
					this.company.latitude = parseFloat(this.company.latitude)
					this.company.longitude = parseFloat(this.company.longitude)
					this.company.many_image = this.company.many_image?this.company.many_image.split(',').map(item=>this.imgUrl(item)):[]
				}
				this.$nextTick(()=>{
					this.companyLoading = false
				})
			},
			storeAdd(){
				this.store.config.page++
				this.storeListLoad()
			},
			listPart(item) {
				return {
					images: item.cover_image,
					tagList: item.tagList,
					street: item.street_name,
					community: item.community_name,
					zhandi: item.spaceNum,
					price:item.meters_money,
					title: `${item.spaceNum}㎡ · ${item.level_des} · ${item.building_title}`,
				}
			},
			storePart(item){
				return {
					images: item.cover_image,
					tagList: item.tagList,
					street: item.street_name,
					community: item.community_name,
					zhandi: item.spaceNum,
					price:item.meters_money,
					title: `${item.spaceNum?item.spaceNum+'㎡':''} · ${item.title}`,
				}
			},
			swiperIndex(index){
				// console.log(index)
				this.imagesBig(this.company.many_image,index)
			},
			async housingListLoad() {
				this.housing.loading = true
				let res = await housingList(this.housing.config)
				if (res.code == 200) {
					let data = res.data
					if (data.length > 0) {
						this.housing.data = [...this.housing.data, ...data]
					} else {
					    if(this.housing.config.page > 1 )	this.housing.config.page--
						this.$refs.uToast.show({
							title: '没有更多数据',
							type: 'info',
						})
					}

				}

				this.housing.loading = false
			},
			
			async storeListLoad() {
				this.store.loading = true
				let res = await storeList(this.store.config)
				if (res.code == 200) {
					let data = res.data
					if (data.length > 0) {
						this.store.data = [...this.store.data, ...data]
					} else {
					    if(this.store.config.page > 1 )	this.store.config.page--
						this.$refs.uToast.show({
							title: '没有更多数据',
							type: 'info',
						})
					}
			
				}
			
				this.store.loading = false
			},
			


			callup() {
				uni.makePhoneCall({
					phoneNumber: this.company.company_telphone //仅为示例
				});
			},
			go() {
				// console.log(1)
				const {
					company
				} = this
				
				uni.openLocation({
					latitude: company.latitude, //纬度
					longitude: company.longitude, //经度
					name: company.company_name,
					address: `${company.address} - ${company.company_name}`,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.index-top {
		position: relative;

		.serach-dh {
			width: 80%;
			background: white;
			position: absolute;
			height: 80rpx;
			border-radius: 100rpx;
			box-shadow: 5rpx 5rpx 6rpx #d1d1d1;
			display: flex;
			padding-left: 30rpx;
			flex-direction: row;
			align-items: center;
			align-items: center;
			bottom: -50rpx;
			left: 10%;
		}
	}

	.contact {
		position: relative;
		// border: 1rpx solid red;
		display: flex;
		align-items: center;

		.button {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 10;
			opacity: 0;
			top: 0;
		}
	}

	.index-center {
		width: 100%;
		background: white;
		padding-bottom: 30rpx;
		padding-top: 60rpx;

		.center {
			margin-top: 50rpx;

			.center-content {
				width: 100%;
				display: flex;
				flex-direction: row;

				.center-part {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// height: 200rpx;
					// border: 1rpx solid red;
					flex: 1;

					.center-part-title {
						margin-top: 20rpx;
						font-size: 28rpx;
					}
				}

			}
		}
	}

	.company-introduce {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		background: white;
		display: flex;
		flex-direction: column;

		.company-introduce-part {
			width: 100%;
			// border: 1rpx solid red;
			align-items: center;
			height: 150rpx;
			display: flex;

			.company-introduce-title {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 15rpx;
				// margin-right: 20rpx;
				// border: 1rpx solid red;

				.company-introduce-title-text {
					font-size: 35rpx;
				}

				.company-introduce-location {
					font-size: 29rpx;
					color: #afafaf;
					display: flex;
					align-items: baseline;
				}

				text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-height: 25px;
					max-height: 25px;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}



		}

		.company-introduce-part-font {

			font-size: 30rpx;

			// color: #39393a;
			.content {
				margin-left: 20rpx;
				margin-right: 20rpx;
				line-height: 50rpx;

				// height: 100rpx;
			}


		}
	}

	.information {
		margin-top: 20rpx;
		// width: 100%;
		// height: 100rpx;
		padding: 25rpx;
		background: white;
		display: flex;
		align-items: center;

		.information-title {
			font-size: 35rpx;
			font-weight: bold;
			color: #0078f8;
		}

	}

	.op {
		opacity: 0.7;
	}

	.right-png {
		margin-left: 15rpx;
	}

	.right-png:last-child {
		margin-right: 20rpx;
	}

	.recommended {
		background: white;
		width: 100%;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		// padding:25rpx;
		.recommended-title {
			font-size: 33rpx;
			padding: 35rpx 0 10rpx 25rpx;
			// margin-left: 25rpx;
			width: 100%;
			// padding-top: 35rpx;
			// border: 1rpx solid red;
		}

		.recommended-content {
			width: 100%;

			// border: 1rpx solid red;
			// height: 200rpx;
			// padding-right: 35rpx;
			display: flex;
			flex-direction: column;
			// padding-left: 10rpx;

			.recommended-part {
				// margin: 25rpx 25rpx 25rpx 25rpx;
				// margin-left: 15rpx;
				// padding: 10rpx 0 10rpx 0;

			}
		}

		.recommended-bottom {
			width: 100%;
			// border: 1rpx solid red;
			display: flex;
			justify-content: center;
			margin-top: 20rpx;

			.recommended-bottom-button {
				width: 85%;
				height: 80rpx;
				// background-color: #ecf5ff;
				// color: #2979ff;
				// font-size: 30rpx;
				// border-radius: 10rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}
		}
	}
</style>
